<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-03-21 17:36:08
 * @LastEditors: william
 * @LastEditTime: 2025-06-27 11:02:29
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="g_t('fleet.schedule')"
    width="850px"
    :before-close="handleClose"
    body-class="dialog-table-class"
  >
    <el-tabs
      v-model="tabValue"
      @tab-change="handleTabChange"
      style="width: 100%"
    >
      <el-tab-pane
        name="1"
        :label="$t('fleet.vehicleAreaTracking')"
        style="height: 100%"
      >
        <VehicleAreaTracking
          :type="props.type"
          :vehicle-id="props.vehicleId"
          :order-id="props.orderId"
        />
      </el-tab-pane>
      <el-tab-pane name="2" label="订单追踪" style="height: 100%">
        <OrderTracking
          :type="props.type"
          :vehicle-id="props.vehicleId"
          :order-id="props.orderId"
        />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div class="detail-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.close')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
import VehicleAreaTracking from './VehicleAreaTracking.vue'
import OrderTracking from './OrderTracking.vue'

const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | view
  },
  vehicleId: {
    type: String,
    default: ''
  },
  orderId: {
    type: String,
    default: ''
  }
})

const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const tabValue = ref('1')

onMounted(() => {
  //
})

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style lang="scss">
.dialog-table-class {
  display: flex;
  .content-container {
    .base-table-container {
      padding: 0;
    }
  }
}
</style>

<style lang="scss" scoped></style>
